import React, { useEffect, useState, useRef } from 'react';
import styles from './index.less';
import { jsapi, layerCreator, viewUtils } from '@/utils/arcgis/index';
import caretRight from './images/play.png';
import pause from './images/stop.png';
import RainEffects from './RainEffect/index';
import WidgetPanel from '@/components/containers/widgetPanel';
export interface RainWaterPropTypes {
  onClose: Function;
}

const RainWater: React.FC<RainWaterPropTypes> = ({onClose}) => {
  const opt = {
    title: '控规_地块——201411',
    type: 'Feature Service',
    url:
      'https://103.233.7.3:8119/arcgis/rest/services/Hosted/%E6%8E%A7%E8%A7%84_%E5%9C%B0%E5%9D%97_201411/FeatureServer/0',
  };
  const rainLayer = useRef<any>(null);
  const timerOfRain = useRef<any>(null);
  const [isRainStop, setIsRainStop] = useState<Boolean>(true);
  useEffect(() => {
    init();
  }, []);
  const init = async () => {
    const [FeatureLayer, Camera] = await jsapi.load(['esri/layers/FeatureLayer', 'esri/Camera']);
    const viewmap = await viewUtils.isViewReady();

    rainLayer.current = new FeatureLayer({
      url: opt.url,
      title: opt.title,
      visible: false,
      elevationInfo: {
        mode: 'on-the-ground', //这个会闪。20190630 // mode: 'on-the-ground',//这个不会闪。20190630
        offset: -1,
        unit: 'meters',
      }, // "spatialReference": new SpatialReference({ // 直接改要素图层的坐标系是不行的，坐标转换后就叠加不到底图上了。 //   wkid: 4549 // })
    });

    const renderer4water = {
      type: 'simple',
      symbol: {
        type: 'polygon-3d',
        symbolLayers: [
          {
            type: 'water',
            waveDirection: 180, //水的流动方向
            color: '#5975a3', //蓝色 // color: [59,93,112],//绿色 // color: [59, 132, 155],//绿色
            // color: "#039962",//绿色
            waveStrength: 'moderate', // 水波强度 calm rippled slight moderate
            waterbodySize: 'large', // 水体大小  small medium large
          },
        ],
      },
    };
    rainLayer.current.renderer = renderer4water;

    viewmap.map.add(rainLayer.current);
    // viewmap.watch("camera",(newValue)=>{
    //   console.log(JSON.stringify(newValue.toJSON()))
    //   })
      var cam = new Camera({
      heading:214.5098748956825,
      tilt:67.62910984771611,
      position:{
      x:117.77691866429569,
      y:39.161917256830066,
      z:533.6753976056352,
      spatialReference:{wkid:4326}
      }
      })
      viewmap.goTo(cam)
  };

  // 日期播放按钮回调
  const handleDatepickerPlayClick = () => {
    let currentElevationInfo = {
      mode: 'absolute-height', //这个会闪。20190630
      offset: -1,
      unit: 'meters',
    };
    if (!isRainStop) {
      clearInterval(timerOfRain.current);
      currentElevationInfo['offset'] = -1
      rainLayer.current.visible = false;
      rainLayer.current.elevationInfo = currentElevationInfo;
      setIsRainStop(true);
      return;
    }
    setIsRainStop(false);
    rainLayer.current.visible = true;
    timerOfRain.current = setInterval(() => {
      currentElevationInfo['offset'] = currentElevationInfo['offset'] + 0.2;
      rainLayer.current.elevationInfo = currentElevationInfo;
    }, 1000);
  };

  function renderContent() {
    if(!isRainStop){
      return <RainEffects/>
    }else{
      return null
    }
  }

  return (
    <WidgetPanel title={'水淹分析'} onClose={onClose}>
    <div className={styles['wapper']}>
      <div className={styles['wapper_box']}>
      <span className={styles['wapper_title']}>水淹分析：</span>
      <span onClick={handleDatepickerPlayClick} className={styles['wapper_btn']}>
        <img src={isRainStop ? caretRight : pause} alt="" />

      </span>
      </div>
      {renderContent()}
    </div>

    </WidgetPanel>
  );
};
export default RainWater;
